<div>
  <Controls></Controls>
  <VueTest v-if="visible"></VueTest>
  <img class="bg-img" :src="img" alt="背景图" />
  <div class="utils">
    <p class="set-btn">设置</p>
    <p class="util1">随机</p>
    <p class="util2">顺序</p>
  </div>
  <div class="page"></div>
</div>

<script setup>
  import Controls from "./Controls.vue";
  import VueTest from "./TextContent.vue";
  const visible = false
  const url = 'https://image.baidu.com/search/acjson?tn=resulttagjson&logid=9902304898151142530&ie=utf-8&fr=&word=%E5%9B%BE%E7%89%87%E5%A3%81%E7%BA%B8&ipn=r&fm=index&pos=history&queryWord=%E5%9B%BE%E7%89%87%E5%A3%81%E7%BA%B8&cl=2&lm=-1&oe=utf-8&adpicid=&st=&z=&ic=&hd=&latest=&copyright=&s=&se=&tab=&width=&height=&face=&istype=&qc=&nc=1&expermode=&nojc=&isAsync=true&pn=30&rn=30&itg=1&gsm=1e&1712627375698='


  const response = await fetch(url);

  const data = await response.json();
  const arr = data.data.map(item => item.thumbURL)
  const len = arr.length
  let index = Math.floor(Math.random()*((len-1) - 0))
  let img = ref(imgArr[index])
  // const obj = JSON.stringify(imgArr)

  class BgImg extends HTMLElement {
    constructor() {
      super();
      const obj = this.dataset.obj
      let index = 0
      function utils(type) {
        const arr = JSON.parse(obj)
        const len = arr.length
        if (type && type === '顺序') {
          index++
        } else {
          index = Math.floor(Math.random()*((len-1) - 0))
        }

        // const src = arr[index].thumbURL
        const src = arr[index]
        console.log(index, src)
        document.querySelector('.bg-img').setAttribute('src', src)
        document.querySelector('.page').innerHTML = `<span style="color: darkturquoise;">${index}</span> / ${len}`
      }

      this.querySelector('.set-btn').addEventListener('click', () => {

      })
      this.querySelector('.util1').addEventListener('click', utils)
      this.querySelector('.util2').addEventListener('click', () => {
        utils('顺序')
      })
      utils('顺序')
      setInterval(() => {
        utils('随机')
      }, 1000 * 60 * 10)
    }
  }
  customElements.define('bg-img', BgImg)
</script>

<style>
  .bg-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .utils {
    position: fixed;
    top: 200px;
    right: 0;
    color: red;
    z-index: 6;
    width: 50px;
  }
  .utils p:hover {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
  }
  .page {
    position: fixed;
    right: 0;
    bottom: 0;
    color: #fff;
  }
  .set-btn {
    display: none;
  }
</style>
